<template>
  <div>
    <div class="group clear-fix">
      <div class="group-item" v-for="item in menuList">
        <div class="group-item-wrapper">
          <div class="item" @click="goMenu(item)">
            <i class="icon" :class="item.iconCls"></i>
            <div class="txt">{{item.text}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapMutations, mapActions} from 'vuex'
  import {applicationURL} from 'config/global.toml'

  export default {
    data() {
      return {
        menuList: [],
        params: {
          _dc: (new Date()).getTime(),
          page: 1,
          start: 0,
          limit: 25
        },
        reqUrl: applicationURL
      }
    },
    mounted() {
      this.initMenu()
    },
    methods: {
      initMenu() {
        let toolListData = {}
        if (this.$KalixCatch.get('toolListData')) {
          toolListData = JSON.parse(this.$KalixCatch.get('toolListData'))
        }
        if (!this.$M_IsEmptyObject(toolListData)) {
          this.menuList = toolListData
        } else {
          if (this.reqUrl.length) {
            console.log(this.params)
            this.$http.get(this.reqUrl, {
              params: this.params
            }).then(response => {
              if (response && response.data) {
                console.log('[toolListData] data:', response.data)
                toolListData = response.data
                this.menuList = toolListData
                this.$KalixCatch.save('toolListData', JSON.stringify(toolListData))
              }
            })
          } else {
            console.log(' ===== this.reqUrl is Null! ===== ')
          }
        }
      },
      goMenu(item) {
        console.log('item.id:', item.id)
        this.saveApp(item.id)
        this.setApp(item.id)
        this.$router.push({path: `/menu`})
      },
      ...mapMutations({
        setApp: 'SET_APP'
      }),
      ...mapActions([
        'saveApp'
      ])
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/assets/stylus/variable.styl"
  @import "~@/assets/stylus/border.styl"
  .group
    .group-item
      position relative
      float left
      width 25%
      &:after
        display block
        content ''
        padding-top 100%
      .group-item-wrapper
        position absolute
        width 100%
        height 100%
        align-items center
        justify-content center
        display flex
        text-align center
        .item
          .icon
            font-size 32px
          .txt
            font-size 12px
            margin-top 12px
</style>
